<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <ul class="change-content" v-if="list.length">
        <li class="buke-items" v-for="(item,index) in list" :key="index" @click="goDet(item.state)">
          <p class="date-time">{{item.dateTime}}</p>
          <div class="buke-items-cont">
            <p class="buke-title overflow-one">{{item.title}}</p>
            <p class="buke-text">上课教练：{{item.teacherName}}</p>
            <p class="buke-text">上课校区：{{item.address}}</p>
            <p class="buke-btn" :class="{ alreadyEvaluated: item.state == '1' }">{{item.state == '1' ? "已评价" : "去评价"}}</p>
          </div>
        </li>
        <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
        <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
      </ul>
      <div v-else class="empty">
        <img src="/static/images/empty-icon.png" alt="空">
        <p class="empty-tips">暂时还没有可补课级哦</p>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '../../store/globalStore'
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否显示加载状态
      list: [
        {state:"1", title: "第三课次", teacherName: '李响', dateTime:'2019-12-12', address: '北京海淀黄庄校区北京海淀黄庄校区'},
        {state:"2", title: "第三课次", teacherName: '李响', dateTime:'2019-12-12', address: '北京海淀黄庄校区北京海淀黄庄校区'},
      ]
    }
  },
  onShow() {
    this.getShiftWorkList();
  },
  methods: {
    // 获取列表
    getShiftWorkList() {
      this.$fetch.shiftWork()
      .then(res=>{
        this.initLoading = false;
      }).catch(err=>{
        this.initLoading = false;
      })
    },
    // 去补课
    goDet(e) {
      wx.navigateTo({
        url: '/pages/evaluate/main?isEva=' + e
      })
    }
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    console.log("下拉刷新");
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //模拟加载
    setTimeout(function(){
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },
  // 上拉加载
  onReachBottom () {
    let that = this;
    that.isReachBottom = true;
    wx.showNavigationBarLoading() //在标题栏中显示加载
    if(that.list.length<10){
      setTimeout(function(){
        that.isReachBottom = false;
        wx.hideNavigationBarLoading() //完成停止加载
        //模拟加载
        that.list = [...that.list,...that.list]
      },1500);
    } else {
      that.isReachBottom = false;
      that.isBottom = true;
      wx.hideNavigationBarLoading() //完成停止加载
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  .change-content{
    width: 100%;
    .buke-items{
      width: 100%;
      overflow: hidden;
      .date-time{
        width: 92px;
        height: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #fff;
        background:rgba(0,183,238,1);
        border-radius:0px 10px 10px 0px;
        margin: 10px 0 8px 0;
      }
      .buke-items-cont{
        width: 100%;
        padding: 10px 16px 14px 16px;
        box-sizing: border-box;
        background: #fff;
        position: relative;
        overflow: hidden;
        .buke-title{
          width: 100%;
          font-size: 16px;
          color: #333;
          font-weight: bold;
          margin-bottom: 14px;
        }
        .buke-text{
          width: 100%;
          font-size: 12px;
          color: #666;
          margin-bottom: 8px;
        }
        .buke-type{
          width: 100%;
          font-size: 12px;
          color: #00B7EE;
        }
        .buke-btn{
          width:  66px;
          height: 24px;
          background:rgba(0,183,238,1);
          border-radius:  10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #fff;
          font-weight: bold;
          position: absolute;
          right: 16px;
          bottom: 15px;
          &.alreadyEvaluated{
            background: #FFA336;
          }
        }
      }
    }
  }
}
</style>
